.hsb-colorpicker {
    .top-panel {
        height: 22px;
        margin: 0 0 10px;
    }

    .color-value {
        width: 22px;
        height: 22px;
        float: left;
        border: @scaled-one-px-value-ie solid @border-regular-control-ie;
        border: @scaled-one-px-value solid @border-regular-control;
        background-image: none;

        .transparent-color {
            width: 22px;
            height: 22px;
            float: left;
            background-position: -168px -12px;
        }
    }

    .color-text {
        color: @text-normal-ie;
        color: @text-normal;
        height: 22px;
        padding: 4px 32px;
        cursor: default;
    }

    .cnt-hb {
        display: inline-block;
        width: 195px;
        height: 196px;
        position: relative;
        background-image: none;
    }

    .cnt-root {
        display: inline-block;
        width: 10px;
        height: 196px;
        margin: 0 8px 0 10px;
    }

    .cnt-sat {
        width: 12px;
        height: 100%;
        position: relative;
        border: @scaled-one-px-value-ie solid @border-regular-control-ie;
        border: @scaled-one-px-value solid @border-regular-control;
        background: linear-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    }

    .cnt-hb-arrow {
        display:  block;
        width: 12px;
        height: 12px;
        margin: -6px;
        position: absolute;
        border: @scaled-one-px-value-ie solid #000;
        border: @scaled-one-px-value solid #000;
        .border-radius(50%);
        &:after{
            content: ' ';
            position: absolute;
            width: 100%;
            height: 100%;
            border: @scaled-one-px-value-ie solid #fff;
            border: @scaled-one-px-value solid #fff;
            .border-radius(50%);
        }
    }

    .cnt-sat-arrow {
        width: 20px;
        height: 12px;
        margin-top: -6px;
        margin-left: -5px;
        margin-left: calc(-4px - @scaled-one-px-value);
        position: absolute;
        background-position: 0px 0px;
        .pixel-ratio__2_5 & {
            .inline-svg-code( @code ) {
                @svg-code: escape(~'<?xml version="1.0" ?>@{code}');
                @inline-svg-code: ~'data:image/svg+xml,@{svg-code}';
                @inline-svg-url: ~"url('@{inline-svg-code}')";
            }
            background-position: center;
            background-size: auto;
            .inline-svg-code(~'<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" stroke-width="0.5" width="20" height="12" fill="black" stroke="white" >
            <path d="M 0 1 L 1 0 L 7 6 L 1 12 L 0 11 z M 20 1 L 19 0 L 13 6 L 19 12 L 20 11 z"/></svg>');
            background-image: @inline-svg-url;
            .margin-left(-4px);
        }

        .rtl & {
            margin-left: 0;
            margin-right: -4px;
            margin-right: calc(-3px - @scaled-one-px-value);
        }
    }

    .empty-color {
        color: @text-normal-ie;
        color: @text-normal;
        height: 16px;
        margin: 5px 0;

        &:hover {
            cursor: pointer;
            background-color: #efefef;
        }

        &:active {
            background-color: #cecece;
        }

        &:before {
            content: "";
            background-position: -28px -196px;
            float: left;
            width: 10px;
            height: 10px;
            margin-right: 5px;
            margin-top: 1px;
            border: @scaled-one-px-value-ie solid @border-regular-control-ie;
            border: @scaled-one-px-value solid @border-regular-control;
        }
    }
}